<template>
	<div class="video-details">
		<!-- 视频的播放 start -->
		<div class="details-hd">
			<div class="video">
				<video
					:src="videoLink"
					controls
					autoplay
					loop
					:poster="videoDetails.mvicon"
				></video>
				<canvas width="748px" height="421px"></canvas>
			</div>
			<div class="song-barrage">
				<div class="song-name">
					<span :title="videoDetails.songname">
						{{ videoDetails.songname }}</span
					>
				</div>
				<div class="barrage">
					<el-input
						placeholder="发个弹幕见证当下吧~"
						v-model="barrage"
						class="input-with-select"
						id="barrage"
					>
						<el-button slot="append" id="send">发送</el-button>
					</el-input>
				</div>
			</div>
			<div class="singer">
				<div class="left">
					<span>歌手：{{ videoDetails.singer }}</span>
					<span>发布：{{ videoDetails.publish_date }}</span>
					<span>{{ videoDetails.play_count }}次播放</span>
				</div>
				<div class="right">
					<div class="btn">
						<i>&#xe600;</i> 收藏({{ videoDetails.collect_count }})
					</div>
					<div class="btn">
						<i>&#xe639;</i> 评论({{ videoDetails.comment_count }})
					</div>
				</div>
			</div>
		</div>
		<!-- 视频的播放 end -->

		<!-- 随机推荐列表 start -->
		<div class="details-bd">
			<el-row class="videos" v-if="randomVideo.length !== 0">
				<el-col
					:xs="8"
					:sm="8"
					:md="8"
					:lg="4"
					v-for="(item, index) of randomVideo"
					:key="item.videoid"
				>
					<div
						class="video-item"
						@click="
							targetvideoDetails(
								item.hd_hash ? item.hd_hash : item.mvhash
							)
						"
					>
						<div class="video-img">
							<img :src="item.img" alt="" />
							<div class="fill-screen">
								<i>&#xe627;</i>
							</div>
						</div>
						<div class="video-name" v-if="index <= 2">
							<em></em>
							<span>{{
								item.description ? item.description : item.title
							}}</span>
						</div>
						<div class="video-name" v-else>
							<i>{{ index + 1 }}.</i>
							<span>
								{{
									item.description
										? item.description
										: item.title
								}}</span
							>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 随机推荐列表 end -->
	</div>
</template>
<script>
import "../assets/js/barragelist.js";
export default {
	data() {
		return {
			// 视频的hash值
			videohash: sessionStorage.getItem("videohash"),
			// 视频内容详情
			videoDetails: {},
			// 视频路径
			videoLink: "",
			// 视频id 用于底下的随机刷新
			videoId: [
				"54",
				"49",
				"29",
				"40",
				"91",
				"142",
				"95",
				"38",
				"22",
				"68",
				"117",
				"67",
				"141",
				"34",
				"75",
				"74",
				"39",
			],
			// 随机生成视频推荐列表
			randomVideo: [],
			barrage: "",
		};
	},
	methods: {
		// 获取mv的详情
		getVideoDetails() {
			this.axios
				.get(
					`/api-video-details/mv.php?cmd=100&hash=${this.videohash}&ismp3=1&ext=mp4`
				)
				.then((res) => {
					let result = res.data;
					if (result.collect_count / 10000 > 1) {
						result.collect_count =
							(result.collect_count / 10000)
								.toString()
								.split(".")[0] + "万";
					}
					if (result.play_count / 10000 > 1) {
						result.play_count =
							(result.play_count / 10000)
								.toString()
								.split(".")[0] + "万";
					}
					if (result.comment_count / 10000 > 1) {
						result.comment_count =
							(result.comment_count / 10000)
								.toString()
								.split(".")[0] + "万";
					}
					result.mvicon = result.mvicon.replace(/\/{size}/, "");
					this.videoDetails = result;
					this.videoLink = this.videoDetails.mvdata.sq.downurl
						? this.videoDetails.mvdata.sq.downurl
						: this.videoDetails.mvdata.le.downurl
						? this.videoDetails.mvdata.le.downurl
						: this.videoDetails.mvdata.rq.downurl;
				});
		},
		// 随机生成的视频推荐列表
		getRandomVideoList() {
			let i = Math.ceil(Math.random() * this.videoId.length);
			this.axios
				.get(
					`/api-video//list?version=9108&plat=0&pagesize=20&id=${this.videoId[i]}&page=1&sort=4&short=0`
				)
				.then((res) => {
					res.data.data.info.forEach((item) => {
						item.img = item.img.replace(/\/{size}/, "");
					});
					this.randomVideo = res.data.data.info;
				});
		},
		// 跳转到视频的详情页
		targetvideoDetails(videohash) {
			sessionStorage.setItem("videoId", this.videoId);
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/videoDetails/${videohash}`);
		},
	},
	mounted() {
		this.getVideoDetails();
		this.getRandomVideoList();
	},
	watch: {
		$route() {
			location.reload();
		},
	},
};
</script>
<style lang="scss">
.video-details {
	// 视频播放 start
	.details-hd {
		.video {
			position: relative;
			height: 421px;
			margin: 0 20px;
			video {
				width: 100%;
				height: 100%;
				background-color: #000;
			}
			canvas {
				position: absolute;
				top: 0;
				left: 0;
				width: 749px;
				height: 421px;
				pointer-events: none;
			}
		}
		.song-barrage {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10px 20px;
			.song-name {
				display: flex;
				align-items: center;

				font-size: 18px;
				font-weight: 700;
				span {
					width: 300px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.el-input-group__append {
				color: #fff;
				background-color: #5192fe;
				.el-button {
					border: 0;
					border-radius: 0;
				}
			}
		}

		.singer {
			display: flex;
			align-items: center;
			margin: 25px 20px;
			.left {
				display: flex;
				span {
					white-space: nowrap;
					margin-right: 30px;
					color: #858585;
					font-size: 14px;
				}
			}
			.right {
				display: flex;
				align-items: center;
				margin-left: 50px;
				.btn {
					display: flex;
					align-items: center;
					cursor: pointer;
					padding: 10px;
					font-size: 14px;
					margin-right: 20px;
					border-radius: 34px;
					white-space: nowrap;
					background-color: #efefef;
					&:hover {
						background-color: #e3e3e3;
					}
				}
				i {
					margin-right: 5px;
					font-size: 15px;
					font-family: "iconfont";
					transform: translateY(1px);
				}
			}
		}
	}
	// 视频播放 end

	.details-bd {
		margin: 0 5px;
		// 随机生成的视频列表 start
		.videos {
			margin-top: 30px;
			.el-col {
				.video-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 214px;
					cursor: pointer;
					.video-img {
						position: relative;
						width: 90%;
						height: 140px;
						img {
							width: 100%;
							height: 100%;
						}
						.fill-screen {
							display: none;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.4);
							i {
								position: absolute;
								top: calc(50% - 20px);
								left: calc(50% - 20px);
								font-family: "iconfont";
								font-size: 40px;
								color: #fff;
								&:hover {
									color: #5192fe;
								}
							}
						}
						&:hover {
							.fill-screen {
								display: block;
							}
						}
					}
					.video-name {
						display: flex;
						width: 90%;
						margin-top: 20px;
						font-size: 14px;
						i {
							width: 10%;
							color: #858585;
						}
						span {
							width: 90%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							color: #333;
						}
						&:hover {
							i {
								color: #5192fe;
							}
							span {
								color: #5192fe;
							}
						}
						em {
							width: 24px;
							height: 24px;
							margin-right: 5px;
							line-height: 20px;
							text-align: center;
							color: #fff;
							font-size: 12px;
							background: url("../assets/img/singer-first.svg")
								no-repeat;
							background-size: contain;
							transform: translateY(-4px);
						}
					}
				}

				&:nth-child(2) {
					.video-name {
						em {
							background-image: url("../assets/img/singer-second.svg");
						}
					}
				}
				&:nth-child(3) {
					.video-name {
						em {
							background-image: url("../assets/img/singer-third.svg");
						}
					}
				}
			}
		}
		// 随机生成的视频列表 end
	}
}
@media (min-width: 992px) {
	.video-details {
		.video {
			height: 409px !important;
			canvas {
				width: 896px !important;
				height: 409px !important;
			}
		}
	}
}
@media (min-width: 1200px) {
	.video-details {
		.video {
			height: 520px !important;
			canvas {
				width: 1340px !important;
				height: 520px !important;
			}
		}
	}
}
@media (min-width: 1920px) {
	.video-details {
		.video {
			height: 660px !important;
			canvas {
				width: 1710px !important;
				height: 660px !important;
			}
		}
	}
}
@media (max-width: 767.99px) {
	.video-details {
		.video {
			height: 200px !important;
			canvas {
				width: 290px !important;
				height: 200px !important;
			}
		}
	}
}
</style>
